<script setup lang="ts">
import { ref } from "vue";
interface PropsType {
  borderNum?: 1 | 2;
  isActive?: boolean;
}

withDefaults(defineProps<PropsType>(), {
  borderNum: 1,
  isActive: false,
});

defineEmits(["click"]);
</script>

<template>
  <div :class="isActive ? `clipPath-Outterbox-active` : `clipPath-Outterbox`">
    <div
      :class="
        borderNum === 1
          ? `clipPath-innerBox`
          : `clipPath-innerBox clipPath-innerBox-borderTwo`
      "
      @click="event => $emit('click', event)"
    >
      <slot></slot>
    </div>
  </div>
</template>

<style scoped lang="scss">
.clipPath-Outterbox {
  width: 100%;
  height: 100%;
  background-color: white;
  opacity: 1;
  transition: 1s;

  .clipPath-innerBox,
  .clipPath-innerBox-borderTwo {
    width: 100%;
    height: 100%;
    position: relative;
    opacity: 1;
    transition: 1s;
  }
}
.clipPath-Outterbox-active {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
  transition: 1s;

  .clipPath-innerBox {
    width: calc(100% - 16px);
    height: calc(100% - 16px);
    background-image: linear-gradient(45deg, blue, red);
    position: relative;
    animation: filterRotate 15s infinite linear;
  }

  .clipPath-innerBox::before {
    content: "";
    position: absolute;
    left: -8px;
    right: -8px;
    top: -8px;
    bottom: -8px;
    border: 4px solid transparent;
    border-image-source: linear-gradient(45deg, blue, red);
    border-image-slice: 1;
    clip-path: inset(0px round 3px);
    animation: clippath 7s infinite 0s linear;
  }

  .clipPath-innerBox-borderTwo::after {
    content: "";
    position: absolute;
    left: -8px;
    right: -8px;
    top: -8px;
    bottom: -8px;
    border: 4px solid transparent;
    border-image-source: linear-gradient(45deg, blue, red);
    border-image-slice: 1;
    clip-path: inset(0px round 3px);
    animation: clippath 7s infinite -3.5s linear;
  }
}

@keyframes filterRotate {
  0% {
    filter: hue-rotate(0deg);
  }

  20% {
    filter: hue-rotate(72deg);
  }

  40% {
    filter: hue-rotate(144deg);
  }

  60% {
    filter: hue-rotate(216deg);
  }

  80% {
    filter: hue-rotate(288deg);
  }

  100% {
    filter: hue-rotate(360deg);
  }
}

@keyframes clippath {
  /* 切割下侧 */
  0% {
    clip-path: inset(0 0 95% 0);
  }

  /* 切割右侧 */
  25% {
    clip-path: inset(0 95% 0 0);
  }

  /* 切割上侧 */
  50% {
    clip-path: inset(95% 0 0 0);
  }

  /* 切割左侧 */
  75% {
    clip-path: inset(0 0 0 95%);
  }

  /* 回归初始切割 */
  100% {
    clip-path: inset(0 0 95% 0);
  }
}
</style>
